<!-- build time:Wed Dec 30 2020 09:55:47 GMT+0800 (中国标准时间) --><!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 4.2.1"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png"><link rel="mask-icon" href="/images/logo.svg" color="#222"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="/lib/font-awesome/css/all.min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css"><script id="hexo-configurations">var NexT=window.NexT||{},CONFIG={hostname:"allens.icu",root:"/",scheme:"Pisces",version:"7.8.0",exturl:!1,sidebar:{position:"left",display:"post",padding:18,offset:12,onmobile:!1},copycode:{enable:!0,show_result:!0,style:"mac"},back2top:{enable:!0,sidebar:!0,scrollpercent:!0},bookmark:{enable:!1,color:"#222",save:"auto"},fancybox:!0,mediumzoom:!1,lazyload:!0,pangu:!1,comments:{style:"tabs",active:null,storage:!0,lazyload:!1,nav:null},algolia:{hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}},localsearch:{enable:!0,trigger:"auto",top_n_per_article:1,unescape:!1,preload:!1},motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},path:"search.xml"}</script><meta property="og:type" content="article"><meta property="og:title" content="Android 过渡动画 浅析"><meta property="og:url" content="https://allens.icu/posts/6a3e872a/index.html"><meta property="og:site_name" content="在雨季等你"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20200813161610.png"><meta property="og:image" content="https://developer.android.google.cn/images/transitions/transitions_diagram.png"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029191701.gif"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20200814142122.png"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201629.png"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201641.png"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030000117.gif"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030095414.gif"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201629.png"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030095633.gif"><meta property="og:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030110948.gif"><meta property="article:published_time" content="2020-10-29T06:46:49.000Z"><meta property="article:modified_time" content="2020-10-30T03:12:08.476Z"><meta property="article:author" content="在雨季等你"><meta property="article:tag" content="动画"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://gitee.com/_Allens/BlogImage/raw/master/image/20200813161610.png"><link rel="canonical" href="https://allens.icu/posts/6a3e872a/"><script id="page-configurations">CONFIG.page={sidebar:"",isHome:!1,isPost:!0,lang:"zh-CN"}</script><title>Android 过渡动画 浅析 | 在雨季等你</title><noscript><style>.sidebar-inner,.use-motion .brand,.use-motion .collection-header,.use-motion .comments,.use-motion .menu-item,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.use-motion .logo-line-before i{left:initial}.use-motion .logo-line-after i{right:initial}</style></noscript></head><body itemscope itemtype="http://schema.org/WebPage"><div class="container use-motion"><div class="headband"></div><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span><h1 class="site-title">在雨季等你</h1><span class="logo-line-after"><i></i></span></a></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul id="menu" class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="tags fa-fw"></i>标签<span class="badge">6</span></a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="th fa-fw"></i>分类<span class="badge">7</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="archive fa-fw"></i>归档<span class="badge">23</span></a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"><input autocomplete="off" autocapitalize="off" placeholder="搜索..." spellcheck="false" type="search" class="search-input"></div><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span></div><div id="search-result"><div id="no-result"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div></div></div></div></header><main class="main"><div class="main-inner"><div class="content-wrap"><div class="content post posts-expand"><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://allens.icu/posts/6a3e872a/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/heard.jpg"><meta itemprop="name" content="在雨季等你"><meta itemprop="description" content="分享是进步最快的方式"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="在雨季等你"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">Android 过渡动画 浅析</h1><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-10-29 14:46:49" itemprop="dateCreated datePublished" datetime="2020-10-29T14:46:49+08:00">2020-10-29</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2020-10-30 11:12:08" itemprop="dateModified" datetime="2020-10-30T11:12:08+08:00">2020-10-30</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Android/" itemprop="url" rel="index"><span itemprop="name">Android</span></a> </span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Android/%E5%8A%A8%E7%94%BB/" itemprop="url" rel="index"><span itemprop="name">动画</span></a> </span></span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-comment"></i> </span><span class="post-meta-item-text">评论数：</span> <a title="valine" href="/posts/6a3e872a/#valine-comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/posts/6a3e872a/" itemprop="commentCount"></span></a></span><br><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>12k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span>11 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><a id="more"></a><h1 id="什么是过渡动画"><a href="#什么是过渡动画" class="headerlink" title="什么是过渡动画"></a>什么是过渡动画</h1><p>过渡动画是Android 5.0 以后提供同的一套动画框架，那么什么是过渡动画呢？借助 <a href="https://developer.android.com/training/transitions?hl=zh-cn" target="_blank" rel="noopener">官网</a>的解释</p><p>使用 <code>过渡</code> 为 <code>布局变化</code> 添加 <code>动画效果</code></p><p>这个解释其实非常的准确，想一个使用场景，Activity/Fragment 切换到其他界面的时候，是否也是一样，布局发生了变化，只需要添加对应的效果，我们也可以做出，界面切换时候炫酷动画效果。当然界面切换只是使用场景之一。</p><blockquote><p>小误区</p></blockquote><p>这里需要说明一下，网上有很多文章提到一个概念：场景动画。在 官网 <a href="https://developer.android.com/training/transitions/start-activity?hl=zh-cn" target="_blank" rel="noopener">使用动画启动 Activity</a> 中，也有提到 <code>场景过渡</code> 所谓的场景动画，无外乎也是 <code>布局变化</code>。不要被太多的概念性名词，混淆了学习的脚步。</p><h1 id="过渡动画有哪些种类"><a href="#过渡动画有哪些种类" class="headerlink" title="过渡动画有哪些种类"></a>过渡动画有哪些种类</h1><p>放上全家福给大家看一下</p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20200813161610.png" width="50%" height="50%"><p>每一种大致的介绍也放在下面</p><table><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>TransitionSet</td><td>组合效果</td></tr><tr><td>AutoTransition</td><td>默认过渡动画，Fade out 渐隐， move 位移 和 resize 大小缩放，fade in 渐显 ，按顺序</td></tr><tr><td>ChangeBounds</td><td>检测view的位置边界创建移动和缩放动画</td></tr><tr><td>ChangeClipBounds</td><td>检测view的剪切区域的位置边界，和ChangeBounds类似。不过ChangeBounds针对的是view而ChangeClipBounds针对的是view的剪切区域(setClipBound(Rect rect) 中的rect)。如果没有设置则没有动画效果</td></tr><tr><td>ChangeImageTransform</td><td>检测ImageView（这里是专指ImageView）的尺寸，位置以及ScaleType，并创建相应动画 一般时候，我们都是和 ChangeBounds 一起使用，能够做出很漂亮的动画</td></tr><tr><td>ChangeTransform</td><td>检测view的scale和rotation创建缩放和旋转动画</td></tr><tr><td>ChangeScroll</td><td>改变滑动位置</td></tr><tr><td>Explode</td><td>分解效果</td></tr><tr><td>Fade</td><td><code>android:fadingMode</code> 淡入淡出 有 fade_in,fade_out ,fade_in_out</td></tr><tr><td>Slide</td><td><code>android:slideEdge</code> 从哪边滑动出，有 left, top, right, bottom, start, end 模式</td></tr></tbody></table><h1 id="如何使用过渡动画"><a href="#如何使用过渡动画" class="headerlink" title="如何使用过渡动画"></a>如何使用过渡动画</h1><p>看一下<a href="https://developer.android.com/training/transitions?hl=zh-cn" target="_blank" rel="noopener">官网</a>如何说的</p><ol><li>为起始布局和结束布局创建一个 Scene 对象。然而，起始布局的场景通常是根据当前布局自动确定的。</li><li>创建一个 Transition 对象以定义所需的动画类型。</li><li>调用 TransitionManager.go()，然后系统会运行动画以交换布局。</li></ol><p>并且还贴心的加上了一个图</p><p><img data-src="https://developer.android.google.cn/images/transitions/transitions_diagram.png" alt=""></p><p>下面以一个简单的示例作为例子</p><blockquote><p>第一步 创建Scene</p></blockquote><p>首先是创建两个不同的 场景 scene_changebounds_1 和 scene_changebounds_2 布局如下</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">androidx.constraintlayout.widget.ConstraintLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">View</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tv_one"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginTop</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#FF6200EE"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintLeft_toLeftOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintRight_toRightOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintTop_toTopOf</span>=<span class="string">"parent"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">View</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tv_two"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginTop</span>=<span class="string">"20dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#FFBB86FC"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintLeft_toLeftOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintRight_toRightOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintTop_toBottomOf</span>=<span class="string">"@+id/tv_one"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">androidx.constraintlayout.widget.ConstraintLayout</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">androidx.constraintlayout.widget.ConstraintLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">View</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tv_two"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"100dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"100dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginTop</span>=<span class="string">"200dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#FFBB86FC"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintLeft_toLeftOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintRight_toRightOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintTop_toTopOf</span>=<span class="string">"parent"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">View</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tv_one"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"100dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"100dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginTop</span>=<span class="string">"20dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#FF6200EE"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintLeft_toLeftOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintRight_toRightOf</span>=<span class="string">"parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">app:layout_constraintTop_toBottomOf</span>=<span class="string">"@+id/tv_two"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">androidx.constraintlayout.widget.ConstraintLayout</span>&gt;</span></span><br></pre></td></tr></table></figure><p>将布局添加到 父类的容器当中 父类的容器布局如下</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">LinearLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:orientation</span>=<span class="string">"vertical"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">FrameLayout</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/scene_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"0dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_weight</span>=<span class="string">"1"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">com.google.android.material.button.MaterialButton</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/btn_switch"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginStart</span>=<span class="string">"3dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginEnd</span>=<span class="string">"3dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#FF6200EE"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:text</span>=<span class="string">"转换"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:textAllCaps</span>=<span class="string">"false"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:textColor</span>=<span class="string">"#ffffff"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:textSize</span>=<span class="string">"15sp"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br></pre></td></tr></table></figure><p>然后就是真的创建 Scene</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">private</span> fun <span class="title">createSceneChangeBounds1</span><span class="params">()</span>: Scene </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> Scene.getSceneForLayout(scene_parent, R.layout.scene_changebounds_1, <span class="keyword">this</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">private</span> fun <span class="title">createSceneChangeBounds2</span><span class="params">()</span>: Scene </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> Scene.getSceneForLayout(scene_parent, R.layout.scene_changebounds_2, <span class="keyword">this</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>最后使用 <code>TransitionManager.go</code> 方法 切换场景</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">TransitionManager.go(scene2, ChangeBounds())</span><br></pre></td></tr></table></figure><p>看一下最终的效果</p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029191701.gif" width="30%" height="30%"><p>其他效果就不一一展示。</p><h1 id="TransitionManager-分析"><a href="#TransitionManager-分析" class="headerlink" title="TransitionManager 分析"></a>TransitionManager 分析</h1><p>接下来我们分析一下 TransitionManager 所有的方法 一张图告诉你</p><p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20200814142122.png" alt=""></p><blockquote><p>图片截取自 <a href="https://www.apiref.com/android-zh/android/transition/TransitionManager.html" target="_blank" rel="noopener">TransitionManager</a></p></blockquote><h1 id="使用场景动画做转场动画"><a href="#使用场景动画做转场动画" class="headerlink" title="使用场景动画做转场动画"></a>使用场景动画做转场动画</h1><p>在上面分析 我们知道，在5.0 极其以上的版本， 过渡动画 其实也可以放在 Activity/Fragment 转场时候。</p><p>在做这个之前 我们需要搞懂一个概念，界面的界面其实是可以分成4个动画</p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201629.png" width="60%" height="60%"> <img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201641.png" width="60%" height="60%"><p>对应的 方法</p><ul><li>Window.setEnterTransition()</li><li>Window.setExitTransition()</li><li>Window.setReenterTransition()</li><li>Window.setReturnTransition()</li></ul><p>下面就开始我们的动画效果</p><h2 id="检查系统版本"><a href="#检查系统版本" class="headerlink" title="检查系统版本"></a>检查系统版本</h2><p>为了兼容，5.0之前的使用方式会放在以后进行说明, 在<a href="https://developer.android.com/training/transitions/start-activity?hl=zh-cn" target="_blank" rel="noopener">官网</a> 中，按照他的不走一步一步来呗</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Check if we're running on Android 5.0 or higher</span></span><br><span class="line"><span class="keyword">if</span> (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) &#123;</span><br><span class="line">    <span class="comment">// Apply activity transition</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// Swap without transition</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="启用窗口内容过渡"><a href="#启用窗口内容过渡" class="headerlink" title="启用窗口内容过渡"></a>启用窗口内容过渡</h2><p>两种配置方式</p><blockquote><p>style 样式中配置</p></blockquote><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">name</span>=<span class="string">"BaseAppTheme"</span> <span class="attr">parent</span>=<span class="string">"android:Theme.Material"</span>&gt;</span></span><br><span class="line"><span class="xml">  <span class="comment">&lt;!-- enable window content transitions --&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;<span class="name">item</span> <span class="attr">name</span>=<span class="string">"android:windowActivityTransitions"</span>&gt;</span>true<span class="tag">&lt;/<span class="name">item</span>&gt;</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>代码中配置</p></blockquote><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function">override fun <span class="title">onCreate</span><span class="params">(savedInstanceState: Bundle?)</span> </span>&#123;</span><br><span class="line">    <span class="keyword">super</span>.onCreate(savedInstanceState)</span><br><span class="line">    <span class="comment">//启用窗口内容过渡 要在 setContentView 之前设置</span></span><br><span class="line">    window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)</span><br><span class="line">    setContentView(R.layout.activity_first)</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="指定自定义过渡"><a href="#指定自定义过渡" class="headerlink" title="指定自定义过渡"></a>指定自定义过渡</h2><p>同样的，指定自定义过渡 也有两种方式</p><h3 id="xml-方式"><a href="#xml-方式" class="headerlink" title="xml 方式"></a>xml 方式</h3><p>在 <code>res/transition</code> 下 创建过渡动画的资源</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">slide</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"500"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:slideEdge</span>=<span class="string">"left"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:interpolator</span>=<span class="string">"@android:interpolator/accelerate_decelerate"</span> /&gt;</span></span><br></pre></td></tr></table></figure><p>然后使用 <code>inflateTransition</code> 方法 加载 资源</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">val transition = TransitionInflater.from(<span class="keyword">this</span>)</span><br><span class="line">    .inflateTransition(R.transition.transition_slide)</span><br><span class="line">window.exitTransition = transition</span><br><span class="line">val compat = ActivityOptionsCompat.makeSceneTransitionAnimation(<span class="keyword">this</span>)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><blockquote><p>除了自定义 系统也为我们提供了一些资源,在 <code>android.R.transition</code> 下有一些常用的过渡效果</p></blockquote><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">val transition =</span><br><span class="line">    TransitionInflater.from(<span class="keyword">this</span>).inflateTransition(android.R.transition.slide)</span><br></pre></td></tr></table></figure><h3 id="代码方式"><a href="#代码方式" class="headerlink" title="代码方式"></a>代码方式</h3><p>和xml 不同的是获取资源的部分替换了</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class"><span class="title">window</span>.<span class="title">exitTransition</span> </span>= Slide().apply &#123;</span><br><span class="line">                    duration = <span class="number">1000</span></span><br><span class="line">                    slideEdge = Gravity.LEFT</span><br><span class="line">                &#125;</span><br><span class="line">val compat = ActivityOptionsCompat.makeSceneTransitionAnimation(<span class="keyword">this</span>)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><h2 id="添加返回的动画"><a href="#添加返回的动画" class="headerlink" title="添加返回的动画"></a>添加返回的动画</h2><p>在SecondAct 中 设置 <code>enterTransition</code> 的动画</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">window.enterTransition = Slide().apply &#123;</span><br><span class="line">           duration = <span class="number">1000</span></span><br><span class="line">           slideEdge = Gravity.RIGHT</span><br><span class="line">       &#125;</span><br></pre></td></tr></table></figure><p>并且使用</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ActivityCompat.finishAfterTransition(<span class="keyword">this</span>)</span><br></pre></td></tr></table></figure><p>替换 <code>finish()</code> 方法</p><p>最终实现效果如下</p><p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030000117.gif" alt=""></p><h2 id="🔥-特别注意"><a href="#🔥-特别注意" class="headerlink" title="🔥 特别注意"></a>🔥 特别注意</h2><p>如果没有指定<code>returnTransition</code>和<code>reenterTransition</code>，返回 FirstActivity 时会分别执行 <code>反转</code> 的进入和退出转换</p><h1 id="ActivityOptionsCompat-浅析"><a href="#ActivityOptionsCompat-浅析" class="headerlink" title="ActivityOptionsCompat 浅析"></a>ActivityOptionsCompat 浅析</h1><p>先看一下他所有的方法</p><table><thead><tr><th>方法</th><th>说明</th></tr></thead><tbody><tr><td>makeCustomAnimation</td><td>自定义动画，传入 <code>res/anim</code> 下的资源id</td></tr><tr><td>makeScaleUpAnimation</td><td>某个固定的坐标以某个大小扩大至全屏</td></tr><tr><td>makeThumbnailScaleUpAnimation</td><td>将一个设置的缩略图 缩放到正在启动的新的Activity</td></tr><tr><td>makeClipRevealAnimation</td><td>新的Activity从屏幕的一小块原始区域显示到其最终的完整表示</td></tr><tr><td>makeSceneTransitionAnimation</td><td>共享元素动画</td></tr></tbody></table><h2 id="makeCustomAnimation"><a href="#makeCustomAnimation" class="headerlink" title="makeCustomAnimation"></a>makeCustomAnimation</h2><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptions <span class="title">makeCustomAnimation</span> <span class="params">(Context context, </span></span></span><br><span class="line"><span class="function"><span class="params">                <span class="keyword">int</span> enterResId, </span></span></span><br><span class="line"><span class="function"><span class="params">                <span class="keyword">int</span> exitResId)</span></span></span><br></pre></td></tr></table></figure><p>自定义动画，将动画资源传入，从而实现动画效果</p><p>资源文件 放在 <code>res/anim</code>下</p><ul><li>enterResId 进场动画 （B Activity 出现的动画）传0 表示没有动画</li><li>exitResId 退场动画 （A Activity 消失的动画）传0 表示没有动画</li></ul><p>先看一下效果</p><p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030095414.gif" alt=""></p><blockquote><p>简单的示例</p></blockquote><p>创建 enter_in 和 enter_out 动画</p><ul><li>enter_in</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"1000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>enter_out</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"-100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"1000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>代码中应用</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式1 </span></span><br><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class">//参数1 <span class="title">enterResId</span> 进场动画 （<span class="title">B</span> <span class="title">Activity</span> 出现的动画）</span></span><br><span class="line"><span class="class">//参数2 <span class="title">exitResId</span>  退场动画 （<span class="title">A</span> <span class="title">Activity</span> 消失的动画）</span></span><br><span class="line"><span class="class"><span class="title">val</span> <span class="title">compat</span> </span>=</span><br><span class="line">    ActivityOptions.makeCustomAnimation(</span><br><span class="line">        <span class="keyword">this</span>,</span><br><span class="line">        R.anim.enter_in,</span><br><span class="line">        R.anim.enter_out</span><br><span class="line">    )</span><br><span class="line">startActivity(intent, compat.toBundle())</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//方式2</span></span><br><span class="line">val compat = ActivityOptionsCompat.makeCustomAnimation(</span><br><span class="line">    <span class="keyword">this</span>,</span><br><span class="line">    R.anim.enter_in,</span><br><span class="line">    R.anim.enter_out</span><br><span class="line">)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//方式3</span></span><br><span class="line">val compat = ActivityOptionsCompat.makeCustomAnimation(</span><br><span class="line">    <span class="keyword">this</span>,</span><br><span class="line">    R.anim.enter_in,</span><br><span class="line">    R.anim.enter_out</span><br><span class="line">)</span><br><span class="line">startActivity(intent, compat.toBundle())</span><br></pre></td></tr></table></figure><blockquote><p>ActivityOptions 和 ActivityOptionsCompat 区别</p></blockquote><p><a href="https://developer.android.com/reference/androidx/core/app/ActivityOptionsCompat" target="_blank" rel="noopener">ActivityOptionsCompat</a> &amp;&amp; <a href="https://developer.android.com/reference/android/app/ActivityOptions" target="_blank" rel="noopener">ActivityOptions</a></p><p><code>ActivityOptions</code> 是帮助我们处理 转场动画的，</p><p><code>ActivityOptionsCompat</code>则是向后兼容的方式访问<code>ActivityOptions</code>中的特性</p><blockquote><p>小提示</p></blockquote><p>看一下 传入的方法 enterResId exitResId 对比之下能够知道，这个方法只能设置 A—-&gt;B 的动画，不支持 B 返回 A 的动画</p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201029201629.png" width="60%" height="60%"><h2 id="makeScaleUpAnimation"><a href="#makeScaleUpAnimation" class="headerlink" title="makeScaleUpAnimation"></a>makeScaleUpAnimation</h2><p>某个固定的坐标以某个大小扩大至全屏</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptions <span class="title">makeScaleUpAnimation</span><span class="params">(View source,</span></span></span><br><span class="line"><span class="function"><span class="params">          <span class="keyword">int</span> startX, <span class="keyword">int</span> startY, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span></span></span><br></pre></td></tr></table></figure><ul><li>参数1 source 参照物 指定从哪个View的坐标开始放大</li><li>参数2 startX 指定以View的X坐标为放大中心的X坐标</li><li>参数3 startY 指定以View的Y坐标为放大中心的Y坐标</li><li>参数4 width 指定放大前新Activity是多宽 0 表示 从无到有</li><li>参数5 height 指定放大前新Activity是多高 0 表示 从无到有</li></ul><p>下面的代码是 以 图片中心点为起点，开始进行过度动画，当返回FirstAct 的时候，依然有动画效果</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class"><span class="title">val</span> <span class="title">compat</span> </span>= ActivityOptions.makeScaleUpAnimation(</span><br><span class="line">    image,</span><br><span class="line">    image.width / <span class="number">2</span>,</span><br><span class="line">    image.height / <span class="number">2</span>,</span><br><span class="line">    <span class="number">0</span>,</span><br><span class="line">    <span class="number">0</span></span><br><span class="line">)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030095633.gif" alt=""></p><h2 id="makeThumbnailScaleUpAnimation"><a href="#makeThumbnailScaleUpAnimation" class="headerlink" title="makeThumbnailScaleUpAnimation"></a>makeThumbnailScaleUpAnimation</h2><p>将一个设置的缩略图 缩放到正在启动的新的Activity</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptionsCompat <span class="title">makeThumbnailScaleUpAnimation</span><span class="params">(@NonNull View source,</span></span></span><br><span class="line"><span class="function"><span class="params">           @NonNull Bitmap thumbnail, <span class="keyword">int</span> startX, <span class="keyword">int</span> startY)</span></span></span><br></pre></td></tr></table></figure><ul><li>参数1 source 传入View 用来确定第二个界面的坐标，以View 左上角作为中心点</li><li>参数1 thumbnail 缩略图</li><li>参数1 startX 相对于参数1 的中心点坐标 x 轴的距离</li><li>参数1 startY 相对于参数1 的中心点坐标 y 轴的距离</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class"><span class="title">val</span> <span class="title">compat</span> </span>= ActivityOptionsCompat.makeThumbnailScaleUpAnimation(</span><br><span class="line">    image,</span><br><span class="line">    BitmapFactory.decodeResource(resources, R.drawable.nm),</span><br><span class="line">    <span class="number">0</span>,</span><br><span class="line">    <span class="number">0</span></span><br><span class="line">)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><p>效果需要拿出8倍镜才能看到。就不放gif了</p><h2 id="makeClipRevealAnimation"><a href="#makeClipRevealAnimation" class="headerlink" title="makeClipRevealAnimation"></a>makeClipRevealAnimation</h2><p>官网的解释是 新的Activity从屏幕的一小块原始区域显示到其最终的完整表示</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptionsCompat <span class="title">makeClipRevealAnimation</span><span class="params">(@NonNull View source,</span></span></span><br><span class="line"><span class="function"><span class="params">           <span class="keyword">int</span> startX, <span class="keyword">int</span> startY, <span class="keyword">int</span> width, <span class="keyword">int</span> height)</span></span></span><br></pre></td></tr></table></figure><ul><li>source View：新活动从中进行动画处理的视图。这定义了startX和startY的坐标空间。</li><li>startX int： 新活动相对于source的x起始位置。</li><li>startY int： 活动的y起始位置，相对于source。</li><li>width int： 新活动的初始宽度。</li><li>height int： 新活动的初始高度。</li></ul><p>这个比较迷惑，不知道那种场景适合用他</p><h1 id="共享元素动画"><a href="#共享元素动画" class="headerlink" title="共享元素动画"></a>共享元素动画</h1><p>上面他的几个方法，平常开发中用的不多。但是下面的几个方法，共享元素的，实际开发中，用的还是比较多的。</p><p>单个共享元素</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptionsCompat <span class="title">makeSceneTransitionAnimation</span><span class="params">(@NonNull Activity activity,</span></span></span><br><span class="line"><span class="function"><span class="params">        @NonNull View sharedElement, @NonNull String sharedElementName)</span></span></span><br></pre></td></tr></table></figure><p>多个共享元素</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> ActivityOptionsCompat <span class="title">makeSceneTransitionAnimation</span><span class="params">(@NonNull Activity activity,</span></span></span><br><span class="line"><span class="function"><span class="params">        Pair&lt;View, String&gt;... sharedElements)</span></span></span><br></pre></td></tr></table></figure><p>单个共享元素核心 在于 <code>sharedElementName</code> 在 两个不同界面 对需要共享的view 设置他的 <code>sharedElementName</code> 属性，当 <code>sharedElementName</code> 相同时候，触发共享元素动画</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class"><span class="title">val</span> <span class="title">compat</span> </span>= ActivityOptionsCompat.makeSceneTransitionAnimation(</span><br><span class="line">    <span class="keyword">this</span>,</span><br><span class="line">    image,</span><br><span class="line">    <span class="string">"image_1_test"</span></span><br><span class="line">)</span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><p>而对于多个共享元素，就需要创建 pair 即可 ，同样的需要在 第二个界面配置相同的 <code>sharedElementName</code> 属性</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">val intent = Intent(<span class="keyword">this</span>, SecondAct::<span class="class"><span class="keyword">class</span>.<span class="title">java</span>)</span></span><br><span class="line"><span class="class"><span class="title">val</span> <span class="title">pair1</span> </span>= androidx.core.util.Pair.create(image as View , <span class="string">"image_1_test"</span>)</span><br><span class="line">val pair2 = androidx.core.util.Pair.create(btn_intent as View, <span class="string">"btn_intent"</span>)</span><br><span class="line">val compat = ActivityOptionsCompat.makeSceneTransitionAnimation(<span class="keyword">this</span>, pair1,pair2)</span><br><span class="line"></span><br><span class="line">ActivityCompat.startActivity(<span class="keyword">this</span>, intent, compat.toBundle())</span><br></pre></td></tr></table></figure><p><img data-src="https://gitee.com/_Allens/BlogImage/raw/master/image/20201030110948.gif" alt=""></p><h1 id="5-0-以前设置转场动画"><a href="#5-0-以前设置转场动画" class="headerlink" title="5.0 以前设置转场动画"></a>5.0 以前设置转场动画</h1><p>针对于 5.0 以前的 设备 可以使用 overridePendingTransition 实现 转场动画</p><ul><li>入场设置</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">startActivity(intent)</span><br><span class="line"><span class="comment">//参数1 进场动画 （B Activity 出现的动画）</span></span><br><span class="line"><span class="comment">//参数2 退场动画 （A Activity 消失的动画）</span></span><br><span class="line">overridePendingTransition(R.anim.enter_in, R.anim.enter_out)</span><br></pre></td></tr></table></figure><ul><li>退场设置</li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">finish()</span><br><span class="line"><span class="comment">//参数1 进场动画 （A Activity 出现的动画）</span></span><br><span class="line"><span class="comment">//参数2 退场动画 （B Activity 消失的动画）</span></span><br><span class="line">overridePendingTransition(R.anim.exit_in, R.anim.exit_out)</span><br></pre></td></tr></table></figure><ul><li>enter_in</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"3000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>enter_out</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"-100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"3000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>exit_in</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"-100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"3000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>exit_out</li></ul><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">translate</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:fromXDelta</span>=<span class="string">"0"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:toXDelta</span>=<span class="string">"100%"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:duration</span>=<span class="string">"3000"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">translate</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>需要在 <code>startActivity</code> 或者 <code>finish</code> 之后立马执行</p></blockquote></div><div class="popular-posts-header">相关文章推荐</div><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><a href="/posts/c579ad73/" rel="bookmark">Android 属性动画 浅析</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="/posts/9ac26029/" rel="bookmark">Android 补间动画 浅析</a></div></li><li class="popular-posts-item"><div class="popular-posts-title"><a href="/posts/45482d84/" rel="bookmark">Android 帧动画 浅析</a></div></li></ul><div class="reward-container"><div></div><button onclick='var e=document.getElementById("qr");e.style.display="none"===e.style.display?"block":"none"'>打赏</button><div id="qr" style="display:none"><div style="display:inline-block"><img src="/images/wechatpay.png" alt="在雨季等你 微信支付"><p>微信支付</p></div><div style="display:inline-block"><img src="/images/alipay.png" alt="在雨季等你 支付宝"><p>支付宝</p></div></div></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者： </strong>在雨季等你</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="https://allens.icu/posts/6a3e872a/" title="Android 过渡动画 浅析">https://allens.icu/posts/6a3e872a/</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags"><a href="/tags/%E5%8A%A8%E7%94%BB/" rel="tag"># 动画</a></div><div class="post-nav"><div class="post-nav-item"><a href="/posts/a9cacf3c/" rel="prev" title="Android Handler 浅析"><i class="fa fa-chevron-left"></i> Android Handler 浅析</a></div><div class="post-nav-item"><a href="/posts/a7e6aa21/" rel="next" title="Android LifeCycle 浅析">Android LifeCycle 浅析 <i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><div class="comments" id="valine-comments"></div><script>window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }</script></div><div class="toggle sidebar-toggle"><span class="toggle-line toggle-line-first"></span> <span class="toggle-line toggle-line-middle"></span> <span class="toggle-line toggle-line-last"></span></div><aside class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc">文章目录</li><li class="sidebar-nav-overview">站点概览</li></ul><div class="post-toc-wrap sidebar-panel"><div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#什么是过渡动画"><span class="nav-number">1.</span> <span class="nav-text">什么是过渡动画</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#过渡动画有哪些种类"><span class="nav-number">2.</span> <span class="nav-text">过渡动画有哪些种类</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#如何使用过渡动画"><span class="nav-number">3.</span> <span class="nav-text">如何使用过渡动画</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#TransitionManager-分析"><span class="nav-number">4.</span> <span class="nav-text">TransitionManager 分析</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#使用场景动画做转场动画"><span class="nav-number">5.</span> <span class="nav-text">使用场景动画做转场动画</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#检查系统版本"><span class="nav-number">5.1.</span> <span class="nav-text">检查系统版本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#启用窗口内容过渡"><span class="nav-number">5.2.</span> <span class="nav-text">启用窗口内容过渡</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#指定自定义过渡"><span class="nav-number">5.3.</span> <span class="nav-text">指定自定义过渡</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#xml-方式"><span class="nav-number">5.3.1.</span> <span class="nav-text">xml 方式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代码方式"><span class="nav-number">5.3.2.</span> <span class="nav-text">代码方式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#添加返回的动画"><span class="nav-number">5.4.</span> <span class="nav-text">添加返回的动画</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#🔥-特别注意"><span class="nav-number">5.5.</span> <span class="nav-text">🔥 特别注意</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ActivityOptionsCompat-浅析"><span class="nav-number">6.</span> <span class="nav-text">ActivityOptionsCompat 浅析</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#makeCustomAnimation"><span class="nav-number">6.1.</span> <span class="nav-text">makeCustomAnimation</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#makeScaleUpAnimation"><span class="nav-number">6.2.</span> <span class="nav-text">makeScaleUpAnimation</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#makeThumbnailScaleUpAnimation"><span class="nav-number">6.3.</span> <span class="nav-text">makeThumbnailScaleUpAnimation</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#makeClipRevealAnimation"><span class="nav-number">6.4.</span> <span class="nav-text">makeClipRevealAnimation</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#共享元素动画"><span class="nav-number">7.</span> <span class="nav-text">共享元素动画</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-0-以前设置转场动画"><span class="nav-number">8.</span> <span class="nav-text">5.0 以前设置转场动画</span></a></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" alt="在雨季等你" src="/images/heard.jpg"><p class="site-author-name" itemprop="name">在雨季等你</p><div class="site-description" itemprop="description">分享是进步最快的方式</div></div><div class="site-state-wrap motion-element"><nav class="site-state"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">23</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/"><span class="site-state-item-count">7</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/"><span class="site-state-item-count">6</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/JiangHaiYang01" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;JiangHaiYang01" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a> </span><span class="links-of-author-item"><a href="https://www.jianshu.com/u/142e8a9d9d71" title="简书 → https:&#x2F;&#x2F;www.jianshu.com&#x2F;u&#x2F;142e8a9d9d71" rel="noopener" target="_blank"><i class="heartbeat fa-fw"></i>简书</a> </span><span class="links-of-author-item"><a href="https://juejin.im/user/5ade713ef265da0b92653545/posts" title="掘金 → https:&#x2F;&#x2F;juejin.im&#x2F;user&#x2F;5ade713ef265da0b92653545&#x2F;posts" rel="noopener" target="_blank"><i class="heartbeat fa-fw"></i>掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-history fa-" aria-hidden="true"></i> 近期文章</div><ul class="links-of-blogroll-list"><li><a href="/posts/51fd8696/" title="线程总结" target="_blank">线程总结</a></li><li><a href="/posts/dac154ea/" title="Jetpack之Navigation浅析" target="_blank">Jetpack之Navigation浅析</a></li><li><a href="/posts/6ef6837/" title="DataBinding 浅析" target="_blank">DataBinding 浅析</a></li><li><a href="/posts/1981ac2c/" title="文章总览" target="_blank">文章总览</a></li><li><a href="/posts/f6108cad/" title="反射浅析" target="_blank">反射浅析</a></li></ul></div></div><div class="back-to-top motion-element"><i class="fa fa-arrow-up"></i> <span>0%</span></div></div></aside><div id="sidebar-dimmer"></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright">&copy; 2018 – <span itemprop="copyrightYear">2020</span> <span class="with-love"><i class="fa fa-heart"></i> </span><span class="author" itemprop="copyrightHolder">在雨季等你</span></div></div></footer></div><script src="/lib/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script><script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script><script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script><script src="/lib/velocity/velocity.min.js"></script><script src="/lib/velocity/velocity.ui.min.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/pisces.js"></script><script src="/js/next-boot.js"></script><script>!function(){var e,t,o=document.getElementsByTagName("link");if(o.length>0)for(i=0;i<o.length;i++)"canonical"==o[i].rel.toLowerCase()&&o[i].href&&(e=o[i].href);t=e?e.split(":")[0]:window.location.protocol.split(":")[0],e||(e=window.location.href),!function(){var i=/([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,o=e,r=document.referrer;if(!i.test(o)){var n="https"===String(t).toLowerCase()?"https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif":"//api.share.baidu.com/s.gif";r?(n+="?r="+encodeURIComponent(document.referrer),o&&(n+="&l="+o)):o&&(n+="?l="+o);var a=new Image;a.src=n}}(window)}()</script><script src="/js/local-search.js"></script><script src="//cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js"></script><script>window.addEventListener('load', () => {
      quicklink({
        timeout : 3000,
        priority: true,
        ignores : [uri => uri.includes('#'),uri => uri === 'https://allens.icu/posts/6a3e872a/',]
      });
      });</script><script>NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : false,
      appId      : '6lUfyTDNhn0hAsWfRDnGKAV3-gzGzoHsz',
      appKey     : 'EsKctJGDiO5s9Dd5qQ4791DG',
      placeholder: "欢迎吐槽",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});</script></body></html><!-- rebuild by neat -->